<template>
  <div class="page_index">
    <div class="header">
      <SvgIcon iconName="icon-boke" className="icon_blog" size="42px" />
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        class="nav"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item
          :index="o.path"
          v-for="o in menuList"
          :key="o.label"
          @click="handleMenuClick(o.path)"
        >
          <el-icon><component :is="o.icon" /></el-icon>
          <span class="label">{{ o.label }}</span>
        </el-menu-item>
      </el-menu>
      <div class="userInfo">
        <template v-if="authority">
          <el-avatar :size="40" :src="circleUrl" />
          <div class="username">您好，{{ username }}</div>
        </template>
        <el-dropdown>
          <span class="el-dropdown-link">
            更多功能
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogin" v-if="!authority"
                >登录</el-dropdown-item
              >
              <el-dropdown-item @click="handleLogout" v-else
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Root",
  props: {},
  components: {},
  emit: [],
  data() {
    return {
      circleUrl: "/avatar.jpg",
      menuList: [
        // { label: "首页", icon: "House", path: "/home" },
        { label: "首页", icon: "House", path: "/mine" },
        { label: "知识库", icon: "Reading", path: "/knowledge" },
        { label: "成长经历", icon: "Compass", path: "/timeline" },
        { label: "留言板", icon: "Message", path: "/message" }
      ]
    }
  },
  computed: {
    username() {
      return this.$store.getters["user/userInfo"]?.username || ""
    },
    activeIndex() {
      return this.$route.path
    },
    userRole() {
      return this.$store.getters["user/userRole"]
    },
    authority() {
      return this.userRole === "admin"
    }
  },
  watch: {},
  methods: {
    handleMenuClick(path) {
      this.$router.push({ path, query: {} })
    },
    handleLogout() {
      this.$messageBox
        .confirm("是否确认退出登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$store.commit("user/clear_userInfo")
        })
    },
    handleLogin() {
      this.$router.push("/login")
    }
  },
  created() {
    if (this.authority) {
      this.menuList.push({
        label: "待办",
        icon: "Clock",
        path: "/clock"
      })
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.page_index {
  width: 100%;
  height: 100%;
  background: $primary_bg;
  .header {
    display: flex;
    height: 60px;
    .icon_blog {
      height: 59px;
      padding-left: 12px;
      background: $header_bg;
      color: $white;
    }
    .el-menu {
      flex: 1;
      justify-content: center;
    }
    .userInfo {
      display: inline-flex;
      height: 59px;
      line-height: 59px;
      padding-right: 12px;
      justify-content: center;
      align-items: center;
      background: $header_bg;
      color: $white;
      .username {
        margin-left: 6px;
        margin-right: 12px;
      }
      .el-dropdown {
        line-height: 59px;
        border-left: 1px solid $border;
        padding: 0 12px;
        color: $white;
        cursor: pointer;
        ::v-deep .el-dropdown-link {
          outline: none;
        }
      }
    }
  }
  .main {
    height: calc(100% - 60px);
    padding: 16px;
    background: $primary_bg;
  }
}
</style>
import { ElMessageBox } from 'element-plus' import { all } from
'core-js/fn/promise' import { unset } from 'lodash'
